<template>
	<div class="main bgwhite min-height">
		<p class="title">登录</p>
		<div class="login">
			<div class="group">
				<img src="./../../assets/images/icon_id.png" class="icon">
				<input type="text" placeholder="请输入学号" v-model="edu">
			</div>
			<div class="group">
				<img src="./../../assets/images/icon_phone.png" class="icon">
				<input type="number" placeholder="请输入手机号" v-model="phone">
			</div>
			<div class="getCode">
				<div class="flex flex-h left">
					<img src="./../../assets/images/icon_code.png" class="icon">
					<input type="text" placeholder="请输入验证码" v-model="code">
				</div>
				<label class="red right" @click="getCode()" v-if="showSend">获取验证码</label>
				<label class="gray" v-else>{{sec}}s后重新发送</label>
			</div>
		</div>
		<div class="p15">
			<van-button type="primary" block @click="submit()">登录</van-button>
		</div>
		<p class="hint" v-if="status == 1">未注册的手机号码将自动创建为学壮壮账号</p>
		<img src="./../../assets/images/logo.png" class="logo">
	</div>
</template>

<script>
import { Toast } from 'vant';
export default {
	data () {
		return {
			edu:"",
			phone:"",
			code:"",
			password:"",
			status:1, //1为验证码登录，2位密码登录

			//倒计时60秒
			sec:60,
			showSend:true, //是否显示发送验证码
			newUser:true, //true新用户，false老用户
		}
	},
	methods:{
		//点击登录
		submit:function(){
			if(this.edu != ''){
				if(this.common.checkPhone(this.phone) == true){
					if(this.code != ''){
						//验证码登录
						this.$axios.get('/login/query',{
							params:{
								studentCode:this.edu,
								phone:this.phone,
							}
						})
						.then(res=>{
							//0未注册,1已注册
							if(res.data.data == 1){
								//效验验证码
								this.$axios.get('/login/pin',{
									params:{
										phone:this.phone,
										pin:this.code
									}
								})
								.then(res=>{
									//验证成功，直接登录
									if(res.data.data){
										this.post_codeLogin();
									}
								})
							}
							else{
								//效验验证码
								this.$axios.get('/login/pin',{
									params:{
										phone:this.phone,
										pin:this.code
									}
								})
								.then(res=>{
									console.log('未注册：' + res.data.data);
									//验证成功，直接登录
									if(res.data.data){
										this.reg();
									}
								})
							}
						})
					}
					else{
						Toast('验证码不能为空');
					}
				}
				else{
					Toast('请输入正确手机号');
				}
			}
			else{
				Toast('学号不能为空');
			}
		},
		//注册
		reg:function(){
			this.$axios.post('/login/register',{
				studentCode:this.edu,
				phone:this.phone,
				openId:this.common.getCookie('openId')
			})
			.then(res=>{
				if(res.data.code == 1){
					this.saveCookie(res);
					this.post_codeLogin();
				}
				else{
					Toast(res.data.msg);
				}
			})
		},
		//验证码效验
		checkCode:function(){
			this.$axios.get('/login/pin',{
				params:{
					phone:this.phone,
					pin:this.code
				}
			})
			.then(res=>{
				console.log(res.data.data);
				//验证成功，直接登录
				if(res){
					return res.data.data;
				}
			})
		},
		//请求 - 验证码登录
		post_codeLogin:function(){
			this.$axios.get('/login/verify',{
				params:{
					studentCode:this.edu,
					phone:this.phone,
					pin:this.code
				}
			})
			.then(res=>{
				if(res.data.code == 1){
					this.saveCookie(res); //保存cookie
					//新用户
					if(this.newUser){
						this.$router.push({path:"/my"});
					}
					//老用户
					else{
						this.$router.push({path:"/"});
					}
				}
				else if(res.data.code == 1008){
					Toast('账户不存在');
				}
				else if(res.data.code == 1009){
					Toast('验证码已失效');
				}
				else if(res.data.code == 1004){
					Toast('验证码错误或已失效');
				}
				else if(res.data.code == 1006){
					Toast('手机已被注册');
				}
			})
		},
		//验证手机号
		getCode:function(){
			if(this.common.checkPhone(this.phone)){
				this.$axios.get('/login/query',{
					params:{
						studentCode:this.edu,
						phone:this.phone,
					}
				})
				.then(res=>{
					//已注册
					if(res.data.code == 1008){
						Toast('该学号已注册');
						this.newUser = false;
						//this.postGetCode(3);
					}
					//未注册
					else{
						this.newUser = true;
						this.postGetCode(1);
					}
				})
			}
			else{
				Toast('请输入正确手机号');
			}
		},
		//获取验证码 - 请求
		postGetCode:function(n){
			this.$axios.get('/login/send',{
				params:{
					phone:this.phone,
					type:n
				}
			})
			.then(res=>{
				if(res.data.code == 1){
					this.showSend = false;
					this.countDown(); //倒计时60s
				}
				else if(res.data.code == 1008){
					Toast('账号不存在');
				}
				else if(res.data.code == 1006){
					Toast('该手机已被注册');
				}
			})
		},
		//倒计时60s
		countDown:function(){
			this.sec = this.sec -1;  //sec初始60
			if(this.sec == 0){
				this.showSend = true; //显示‘获取验证码’
				this.sec = 60;
			}
			else{
				setTimeout(()=>{
					this.countDown();
				},1000)
			}
		},
		//保存cookie
		saveCookie:function(res){
			this.common.setCookie('token',res.data.data.token); //token
			this.common.setCookie('name',res.data.data.studentName); //姓名
			this.common.setCookie('edu',res.data.data.studentCode); //学籍号
			this.common.setCookie('studentUid',res.data.data.studentUid); //学生id
			this.common.setCookie('year',res.data.data.annual); //2018秋
			this.common.setCookie('planId',res.data.data.collectionUid); //采集计划id
			this.common.setCookie('phone',res.data.data.phone); //手机号
		},
		//忘记密码
		toForget:function(){
			this.$router.push({path:"/forget"});
		},
		//查询openId
		DetailOpenId:function(){
			let openId = this.common.getCookie('openId')?this.common.getCookie('openId'):this.$route.query.id;
			this.$axios.post('/token/' + openId)
			.then(res=>{
				//如果已经绑定
				if(res.data.data){
					this.saveCookie(res);
				}
			})
		},
	},
	created:function(){
		document.title = "登录";
	},
	mounted:function(){
		//查询openId
		this.DetailOpenId();
	}
}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		position: relative;
	}
	//验证码
	.getCode{
		display: flex;
		padding: 15px 0;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
		.icon{
			height: 18px;
			margin-right: 8px;
		}
		input{
			border: none;
		}
		.left{
			width:calc(100% - 100px);
		}
		.right{
			text-align: right;
			width: 100px;
		}
	}

	.title{
		text-align: center;
		padding-top: 30px;
		font-size: 16px;
	}
	.login{
		padding: 0.2rem 30px;
		.group{
			padding: 15px 0;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eee;
			.icon{
				height: 18px;
				margin-right: 8px;
			}
			input{
				width: 100%;
				border: none;
			}
		}
	}

	//切换
	.switch{
		padding-top: 0.3rem;
		text-align: center;
		font-size: 16px;
		i{
			margin-left: 10px;
			font-size: 18px;
		}
	}

	//logo
	.logo{
		position: absolute;
		width: 1rem;
		bottom: 20px;
		left: 50%;
		margin-left: -0.5rem;
	}

	//忘记密码
	.forget{
		padding-top: 10px;
		text-align: right;
		span{
			color: #4FB7FC;
		}
	}
	.gray{font-size: 14px;}
</style>
